<template>
  <textarea class="txt" rows="1" @input="handleChange"></textarea>
</template>

<script setup>
// 这个会有一个问题，在还没有到最后边框的时候就已经换行了
function handleChange(e){
  const textarea = e.target
  console.log(textarea.scrollHeight)
  textarea.style.height = 'auto'
  textarea.style.height = textarea.scrollHeight + 'px'
}
</script>

<style lang="scss" scoped>
.txt{
  border: none;
  outline: none;
  font-size: 16px;
  display: block;
  width: 300px;
  resize: none;
  background-color: #ddd;
  color: #fff;
}
</style>